<template>
  <el-dialog
    v-el-drag-dialog
    :title="title"
    :visible.sync="visible"
    :width="width"
    append-to-body
    :close-on-click-modal="false"
    :before-close="close"
    v-bind="$attrs"
    top="20px"
  >
    <slot />
    <div class="dialog-footer">
      <slot name="footer" />
    </div>
  </el-dialog>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog/index'
export default {
  name: 'PeDialog',
  directives: {
    elDragDialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    width: {
      type: String,
      default: '30%'
    },
    beforeClose: {
      type: Function,
      default: null
    }
  },
  methods: {
    close() {
      if (this.beforeClose) {
        this.beforeClose()
      } else {
        this.$emit('update:visible', false)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
>>> .el-dialog__body {
  padding: 10px 20px;
}
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
